<template>
  <view class="box">
    <view class="header">
      <view>
        <view>承运来源：{{ expressCompanyName }}</view>
        <view style="margin-top:8rpx;">运单编号：{{ logisticsnumber }}</view>
      </view>
      <view style="color:#D12C25;">运输中</view>
    </view>
    <view class="footer">
      <view style="padding:36rpx 32rpx;">
        <u-time-line>
          <u-time-line-item v-for="(item, index) in logisticslist" :key="index" nodeTop="2">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-if="index == 0" v-slot:node>
              <view class="u-node" style="background: #D12C25;">
              </view>
            </template>
            <template v-slot:content>
              <view>
                <view v-if="index == 0" class="u-order-title">{{ list.logisticsStatusDesc }}</view>
                <view class="u-order-desc">{{ item.desc }}
                </view>
                <view class="u-order-time">{{ item.time }}</view>
              </view>
            </template>
          </u-time-line-item>
          <!-- <u-time-line-item >
                 
                    <template v-slot:content>
                        <view>
                            <view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>
                            <view class="u-order-time">2019-12-06 22:30</view>
                        </view>
                    </template>
                </u-time-line-item> -->


        </u-time-line>
      </view>

    </view>

  </view>
</template>

<script>
import { queryLogistics } from '@/api/main'

export default {

  data() {
    return {
      trackingNumber:null,
      list: [],
      logisticslist: [],
      logisticsnumber: '',
      expressCompanyName: '',

    };
  },
  onLoad(e){
    console.log('我看看传过来的数据',e)
    this.trackingNumber=e.trackingNumber
  },
  onShow() {
    this.getlogistics()
  },
  methods: {
    getlogistics() {
      let obj = {
        // mobile:'1554',
        //expressCode:'',
        number: this.trackingNumber,
        sort: 'desc'
      }
      queryLogistics(obj).then(res => {
        console.log('我看看数据类型',res)
        this.list = res
        console.log('我看看数据', this.list)
        this.expressCompanyName = this.list.expressCompanyName
        this.logisticsnumber = this.list.number
        console.log('转换', this.list.data)
        this.logisticslist = this.list.logisticsTraceDetails
        this.logisticslist.forEach((item) => {
          const timedate = new Date(item.time);
          const timedatatwo = timedate.toLocaleString()
          const formattedDate = new Date(timedatatwo);
          const year = formattedDate.getFullYear();
          const month = String(formattedDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
          const day = String(formattedDate.getDate()).padStart(2, '0');
          const hours = String(formattedDate.getHours()).padStart(2, '0');
          const minutes = String(formattedDate.getMinutes()).padStart(2, '0');
          const seconds = String(formattedDate.getSeconds()).padStart(2, '0');
          const formattedDateTwo = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
          item.time = formattedDateTwo
        })
        console.log('数组', this.logisticslist)
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 100vw;
  min-height: 100vh;
  padding: 24rpx 32rpx;
  background-color: #F5F5F5;

  .header {
    padding: 36rpx 32rpx;
    border-radius: 8rpx;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
  }

  .footer {

    background-color: white;
    border-radius: 8rpx;
    margin-top: 16rpx;


  }

}

::v-deep {
  .u-node {
    width: 20rpx;
    height: 20rpx;
    border-radius: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d0d0d0;
  }

  .u-order-title {
    color: #333333;
    font-weight: bold;
    font-size: 32rpx;
  }

  .u-order-desc {
    color: rgb(150, 150, 150);
    font-size: 28rpx;
    margin-bottom: 6rpx;
  }

  .u-order-time {
    color: rgb(200, 200, 200);
    font-size: 26rpx;
  }
}
</style>